import React, { useEffect, useState, useMemo } from "react";
import { Typography, message, Tree, Switch, Button, Tag } from "antd";

import EditModal from "./EditResourceModal";
import request from "@/utils/request";
import { transformTreeData } from "@/utils/util";
import { menuTypeTextMap, roleTypeTextMap } from "@/utils/consts";
// import { useAppSelector } from '@/utils/hooks'

import type { RecordDetail } from "../type";
import { Params } from "@/views/AuthManage/TenantManage/type";
import { PlusOutlined } from "@ant-design/icons";

interface Props {
	menuId?: React.Key;
	onEdit: (detail: RecordDetail) => void;
}

const Content: React.FC<Props> = ({ menuId, onEdit }) => {
	// const [app] = useAppSelector(state => [state.app])
	const [detail, setDetail] = useState<RecordDetail>();

	useEffect(() => {
		if (menuId) {
			queryDetail();
		}
	}, [menuId]);

	const queryDetail = () => {
		request("resourceManageById", {
			data: {
				id: menuId
			}
		}).then(res => {
			if (res.code === 0) {
				setDetail(res.data);
			}
		});
	};

	const handleEdit = (values: RecordDetail) => {
		return request("resourceManageEdit", {
			data: {
				...values,
				id: detail?.id
			}
		}).then(res => {
			if (res.code === 0) {
				message.success("修改成功");
				onEdit({ ...detail, ...values } as RecordDetail);
				queryDetail();
			}
			return res;
		});
	};

	const changeStatus = () => {
		const values = { ...detail };
		request("resourceUpdateStatus", {
			data: { id: values.id, status: values.status === 1 ? 0 : 1 }
		}).then(res => {
			if (res.code === 0) {
				message.success("更新成功");
				queryDetail();
			}
		});
	};

	const items = useMemo(() => {
		const tagShow = (record: RecordDetail) => {
			return (
				<div>
					{record?.roleTypeList.map(type => {
						const roleInfo = {
							label: roleTypeTextMap[type] || `未知角色(${type})`,
							color: ["red", "blue", "green"][type]
						};
						return (
							<Tag key={type} color={roleInfo.color}>
								{roleInfo.label}
							</Tag>
						);
					})}
				</div>
			);
		};

		return [
			{
				label: "菜单名称",
				content: detail?.menuName,
				editor: null
			},
			{
				label: "菜单类型",
				content: menuTypeTextMap[detail?.menuType as keyof typeof menuTypeTextMap],
				editor: null
			},
			{
				label: "请求地址",
				content: detail?.url,
				editor: null
			},
			{
				label: "资源点",
				content: detail?.perms,
				editor: null
			},
			{
				label: "显示排序",
				content: detail?.sorted,
				editor: null
			},
			{
				label: "图标",
				content: detail?.icon,
				editor: null
			},
			{
				label: "角色类型",
				// content: detail?.roleTypeList,
				content: tagShow(detail as RecordDetail),
				editor: null
			},
			{
				label: "状态",
				content: <Switch checked={!!detail?.status} onChange={() => changeStatus()} />
			}
		];
	}, [detail]);

	return (
		<div className="role-manage-content flex1">
			<div className="betweenCenter mb20">
				<Typography.Title level={5} style={{ margin: 0 }}>
					资源信息
				</Typography.Title>
				<EditModal onEdit={handleEdit} detail={detail}></EditModal>
			</div>
			{items.map((item, index) => {
				return (
					<div className="startCenter content-item" key={index}>
						<div className="label">{item.label}</div>
						<div className="flex1 startCenter value" style={{ borderBottom: index === items.length - 1 ? 0 : "" }}>
							<div className="flex1">{item.content}</div>
							{item.editor}
						</div>
					</div>
				);
			})}
		</div>
	);
};

export default Content;
